Vue 模板语法

2022-04-21
javascript vue2.0

Vue.js主要使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定至底层的Vue实例数据，由于Vue.js基于HTML模板语法，所以所编写的自然而然能被浏览器所解析（除了远古浏览器）。

插值

插值主要包含了文本、原始HTML、属性、原始表达式等四类，其中我们会在本章一一进行介绍：

文本

Mustache

在Vue.js中，常见的数据绑定形式就使用Mustache语法来进行插值，即<p>{{message}}</p>，这里的Mustache是一款经典的前端模板引擎，而Mustache的价值在其稳定以及经典，其中在Vui内的{{……}}写法就类似与Mustache模板引擎的语法：

1	<p>{{ message }}</p>

v-once

Vue.js为我们提供了一个类似与Object.freeze()阻止修改的方法，而vue又为我们提供了另一种方法即v-once指令，通过v-once指令我们可以进行一次性插值，当数据改变的时候，内容将不会被更新.

<div id="app">
    <span v-once>{{ message }}</span>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'Hello,world'
        }
    })
</script>

原始 HTML

通常在为我们提供指令的时候一般都会提供一个输出原始HTML的指令。Vue并不例外，Vue所提供的指令是v-html，即：

1	<div v-html="html"></div>

建议

v-html指令预期是字符串类型，内容按照HTML进行插入，不会被当作vue模板进行编译。使用v-html指令可能会出现一些安全问题，所以我们尽量在一些不容易发生问题的地方使用。

v-bind

v-bind:id

在默认的情况下Mustache语法并不能使用在HTML 属性中（在vue编译的范围内），当遇到这种情况的时候我们可以使用v-bind指令：

<div v-bind:id="app">{{Hello}}</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'Hello,world'
        }
    })
</script>

如果你还不能理解上面的Code以及v-bind指令，我们可以通过下方code来进行理解：

<div v-bind:id="app">{{Hello}}</div>

<div id="app">
    <p>{{hello}}</p>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'Hello,world'
        }
    })
</script>

在上述的code中，使用v-bind指令的html属性将会在vue编译的范围内进行输出，而未使用b-bind指令的html属性将不会进行输出。

v-bind:src

通过使用v-bind:src指令，我们可以绑定一个src属性的比如img元素:

<div id="app">
    <img v-bind:src="img" alt="">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            img: 'https://img-home.csdnimg.cn/images/20201124032511.png'
        }
    })
</script>

当然v-bind指令还可以支持缩写为:，及上述img元素重构为:

1	<img :src="img" alt="">

v-pind:class

除了id～src之外，还支持class等方法：

<style>
    .red {
        color: red;
    }
</style>
<body>
    <div id="app">
        <p v-bind:class="colorRed">Hello,world</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                colorRed: 'red'
            }
        })
    </script>

```vue
        <div id="app">
            <p v-bind:class="[one, two]">Hello,world</p>
        </div>

Vue 通过class red添加到vue的渲染队列中，最后使用v-pind:class来引入colorRed。

v-pind:style

<style>
    .red {
        color: red;
    }
</style>
<body>
    <div id="app">
        <p v-bind:style="colorRed">Hello,world</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                colorRed: {
                    color: 'red',
                    fontSize: "20px"
                }
            }
        })
    </script>

```vue
        <div id="app">
            <p v-bind:style="[one, two]">Hello,world</p>
        </div>

v-pind:href

除了以上的几种v-pind参数之外，自然还支持了href参数

<div id="app">
    <a v-bind:href="url">Go blog</a>
</div>
    <script>
        var app =  new Vue({
            el: '#app',
            data: {
                url: 'http://sif_one.gitee.io/'
            }
        })
    </script>

JavaScript 表达式

vue对javascript表达式有良好的支持，且并不限于表达式，甚至包括语句：

<div id="app">
    {{message + ',vue!'}}
</div>
<script>
    var app =new Vue({
        el: '#app',
        data: {
            message: 'hello'
        }
    }) 
</script>

<div id="app">
	{{ ok ? 'YES!' : 'NO!' }}<br>
</div>
    <script>
        var app =  new Vue({
            el: '#app',
            data: {
                ok: false,
            }
        })
    </script>
```  
## 指令
![](https://49812933408852955071488026628034-1301075051.cos.ap-nanjing.myqcloud.com/1615219482_20210308231156016_218446905.gif)
指令即（Directives）则在vue中则是代表有```v-```前缀的特殊属性，当表达式改变的时候也会将行为应用到DOM内：
```vue
<div id="app">
	<p v-if="seen">Hello,world!</p>
</div>
    <script>
        var app =  new Vue({
            el: '#app',
            data: {
                seen: true,
            }
        })
    </script>

由于将属性加入到了DOM对象内，所以我们可以通过控制台来进行操作对象，就如本文中我们将此来实现显示以及隐藏等。

参数

当介绍完指令之后，自然而然的就是轮到了参数，就以上述的code为例子，v-if为属性，而seen为参数，如果要写我们可以这样：

<div id="app">
    <a v-bind:href="url">Go blog</a>
</div>
    <script>
        var app =  new Vue({
            el: '#app',
            data: {
                url: 'http://sif_one.gitee.io/'
            }
        })
    </script>

修饰符

v-on

```vue
    <div id="app">
    </div>
    <form v-on:submit.prevent="onSubmit">
        <a v-bind:href="url">Go blog</a>
    </form>
        <script>
            var app =  new Vue({
                el: '#app',
                data: {
                    url: 'http://sif_one.gitee.io/'
                }
            })
        </script>

那么其最后在 v-on指令的笼罩下范围内的<a>标签将会失去原本的作用：

ID	DA	FA
.stop	调用 event.stopPropagation()	停止传播
.prevent	调用 event.preventDefault()	防止默认
.capture	添加事件侦听器时使用capture(捕获) 模式
.self	只当事件从侦听器绑定元素本身触发时才进行回调
```.{keyCode	keyAlias} ```	只当事件从特定键触发时才进行回调
.native	监听组件根本元素的原生事件
.once	只触发一次回调
.left	只当点击鼠标左键时触发
.right	只当鼠标点击右键时触发
.middle	当鼠标中键时触发
.passive	以 { passive: true } 模式添加侦听器

缩写

虽然已经在上述说明中标注了其指令的缩写，但为了视觉效果和让读者感觉非常重要，还是要单独列一个标题来着重标注。

Vue.js最为不同且便捷的方式就是，基本上每个指令都会有一个缩写，其中v-前缀作为一种视觉提示，可用来辨别vue特定的属性，就如本文我们所出现的 v-bind、v-on缩写分别为:以及@。

⬅️ Go back